<template>
  <div>
    <div class="myecharts">
      <div ref="chart1" class="myecharts1" style="height: 400px"></div>
      <div ref="chart2" class="myecharts2" style="height: 400px"></div>
    </div>
    <div class="myecharts">
      <div ref="chart3" class="myecharts3" style="height: 400px"></div>
      <div ref="chart4" class="myecharts4" style="height: 400px"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      chart1: null,
      chart2: null,
      chart3: null,
      chart4: null,
      // 配置可视化图形
      option1: {
        title: {
          text: '房源类型信息',
          subtext: '房源信息',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '房源数量',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '大床房' },
              { value: 735, name: '标间' },
              { value: 580, name: '民宿' },
              { value: 484, name: '标准双人间' },
              { value: 300, name: '标准大床房' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      },
      option2: {
        title: {
          text: '本周人数图表',
          subtext: '人数',
          left: 'center',
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
          },
        ],
      },
      option3: {
        title: {
          text: '人数趋势图表',
          subtext: '人数',
          left: 'center',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '30%'],
        },
        visualMap: {
          type: 'piecewise',
          show: false,
          dimension: 0,
          seriesIndex: 0,
          pieces: [
            {
              gt: 1,
              lt: 3,
              color: 'rgba(0, 0, 180, 0.4)',
            },
            {
              gt: 5,
              lt: 7,
              color: 'rgba(0, 0, 180, 0.4)',
            },
          ],
        },
        series: [
          {
            type: 'line',
            smooth: 0.6,
            symbol: 'none',
            lineStyle: {
              color: '#5470C6',
              width: 5,
            },
            markLine: {
              symbol: ['none', 'none'],
              label: { show: false },
              data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }],
            },
            areaStyle: {},
            data: [
              ['2022-10-10', 200],
              ['2022-10-11', 560],
              ['2022-10-12', 750],
              ['2022-10-13', 580],
              ['2022-10-14', 250],
              ['2022-10-15', 300],
              ['2022-10-16', 450],
              ['2022-10-17', 300],
              ['2022-10-18', 100],
            ],
          },
        ],
      },
      option4: {
        title: {
          text: '上周人数图表',
          subtext: '人数',
          left: 'center',
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [120, 180, 245, 218, 180, 220, 260],
            type: 'line',
          },
        ],
      },
    }
  },
  mounted() {
    this.getPage()
  },
  methods: {
    getPage() {
      // 引用chart1并初始化
      this.chart1 = this.$echarts.init(this.$refs.chart1)
      this.chart2 = this.$echarts.init(this.$refs.chart2)
      this.chart3 = this.$echarts.init(this.$refs.chart3)
      this.chart4 = this.$echarts.init(this.$refs.chart4)
      // 使用刚指定的配置项和数据显示图表。
      this.chart1.setOption(this.option1)
      this.chart2.setOption(this.option2)
      this.chart3.setOption(this.option3)
      this.chart4.setOption(this.option4)
    },
  },
}
</script>

<style lang="scss" scoped>
.myecharts {
  height: 100%;
  display: flex;
}
.myecharts1 {
  width: 50%;
}
.myecharts2 {
  width: 50%;
}
.myecharts3 {
  width: 50%;
}
.myecharts4 {
  width: 50%;
}
</style>
